'use client';
import type { Restaurant } from '@/lib/types';
import { getPrimaryCuisineColor } from '@/lib/cuisine-colors';

export interface ResultCardProps {
  // 餐厅数据
  restaurant: Restaurant;
  // 不喜欢餐厅的回调函数
  onDislike: () => void;
  // 接受餐厅的回调函数 ，点击接受按钮时调用
  onAccept: () => void;
}

export default function ResultCard({ restaurant, onDislike, onAccept }: ResultCardProps) {
  const cuisineColor = getPrimaryCuisineColor(restaurant.cuisines);

  return (
    <div className="max-w-md w-full rounded-2xl border border-black/10 dark:border-white/15 shadow-sm bg-background overflow-hidden">
      <div className={`relative aspect-[4/3] w-full overflow-hidden ${cuisineColor.background}`}>
        <div className="w-full h-full flex flex-col items-center justify-center">
          {cuisineColor.icon && (
            <div className="text-6xl mb-2 opacity-90">
              {cuisineColor.icon}
            </div>
          )}
          <div className={`text-lg font-medium ${cuisineColor.text} opacity-80`}>
            {restaurant.cuisines[0] || '美食'}
          </div>
        </div>
      </div>
      <div className="p-4 space-y-3">
        <div className="flex items-center justify-between">
          <h2
            className="text-lg font-semibold tracking-tight"
            aria-label={`餐厅名称：${restaurant.name}`}
          >
            {restaurant.name}
          </h2>
          <span
            className="text-xs text-black/60 dark:text-white/60 px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800"
            aria-label={restaurant.source === 'nearby' ? '附近餐厅' : '外卖餐厅'}
          >
            {restaurant.source === 'nearby' ? '附近' : '外卖'}
          </span>
        </div>
        <div className="flex flex-wrap gap-2" aria-label="菜系">
          {restaurant.cuisines.map((c) => (
            <span
              key={c}
              className="text-xs px-2 py-1 rounded-full border border-black/10 dark:border-white/20"
              aria-label={`菜系：${c}`}
            >
              {c}
            </span>
          ))}
        </div>

        <div className="flex gap-3 pt-2">
          <button
            onClick={onDislike}
            className="flex-1 rounded-md border border-black/10 dark:border-white/20 px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border"
            aria-label="不喜欢，换一个"
          >
            不喜欢，换一个
          </button>
          <button
            onClick={() => {
              if (restaurant.mapUrl) {
                window.open(restaurant.mapUrl, '_blank', 'noopener,noreferrer');
              } else {
                onAccept();
              }
            }}
            className="flex-1 rounded-md bg-foreground text-background px-3 py-2 text-sm hover:bg-foreground/90 transition-colors duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground"
            aria-label="就吃这个！"
          >
            就吃这个！
          </button>
        </div>
      </div>
    </div>
  );
}
